import React, { createElement } from 'react'
import { PlusOutlined } from '@ant-design/icons'
import { Button } from 'antd'

import './index.less'

export interface EditableLink {
  title: string
  href: string
  id?: string
}

interface EditableLinkGroupProps {
  onAdd: () => void
  links: EditableLink[]
  linkElement: any
}

const EditableLinkGroup: React.FC<EditableLinkGroupProps> = props => {
  const { links, linkElement, onAdd } = props
  return (
    <div className="linkGroup">
      {links.map(link =>
        createElement(
          linkElement,
          {
            key: `linkGroup-item-${link.id || link.title}`,
            to: link.href,
            href: link.href
          },
          link.title
        )
      )}
      <Button size="small" type="primary" ghost onClick={onAdd}>
        <PlusOutlined /> 添加
      </Button>
    </div>
  )
}

EditableLinkGroup.defaultProps = {
  links: [],
  onAdd: () => {
    console.log('66')
  },
  linkElement: 'a'
}

export default EditableLinkGroup
